<template>
  <div class="navi-container">
    <span :class="[{'is-disabled': latest}, 'iconfont']" @click="onLeft">&#xe8ed;</span>
    <span class="title">{{title}}</span>
    <span :class="[{'is-disabled': first}, 'iconfont']" @click="onRight">&#xe8ec;</span>
  </div>
</template>

<script>
export default {
  name: 'ClassicNavi',
  props: {
    title: String,
    first: Boolean,
    latest: Boolean
  },
  methods: {
    onLeft () {
      !this.latest && this.$emit('left')
    },
    onRight () {
      !this.first && this.$emit('right')
    }
  }
}
</script>

<style lang="stylus" scoped>
  .navi-container
    display: inline-flex
    flex-direction: row
    justify-content: space-between
    align-items: center
    height: .8rem
    width: 6rem
    background-color: #f7f7f7
    border-radius: .02rem
    .iconfont
      .6rem
    .is-disabled
      color: #C7C7C7
    .title
      font-size: .28rem
</style>
